<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>附件上传</title>
    <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/static/webUpload/webuploader.css" type="text/css">
</head>
<body>
<div class="layui-card-body">
    <div id="picker">选择文件</div>
    <table id="list_table"></table>
</div>
</body>
</html>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<script src="${ctx}/static/jquery/jquery.min.js" charset="utf-8"></script>
<script src="${ctx}/static/webUpload/webuploader.min.js" charset="utf-8"></script>
<script>
    var table,uploader;
    layui.use(['jquery','element'], function(){
        var $ = jQuery = layui.$;
        var element = layui.element;

        uploader = WebUploader.create({
            auto: true, // 选完文件后，是否自动上传
            // 不压缩image
            resize: false,
            // swf文件路径
            swf: '${ctx}/static/webUpload/Uploader.swf',
            // 文件接收服务端。
            server: '${ctx}/sys_admin/mineservice/uploadFile?tablename=${tablename!}&parentid=${parentid!}',
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            fileNumLimit :10, // [默认值：undefined] 验证文件总数量, 超出则不允许加入队列。
            fileSingleSizeLimit: 1000 * 1024 * 1024
        });

        //当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $("#list_table").append("<tr id="+file.id+"><td>"+file.name+"</td><td>"+0%+"</td></tr>")
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var value = percentage.toFixed(2) * 100;
            $("#"+file.id).find(('td:eq(1)')).empty().append(value+"%");
        });

        uploader.on( 'uploadSuccess', function( file ) {
            $("#"+file.id).find(('td:eq(1)')).empty().append("100%");
        });

        uploader.on( 'uploadError', function( file ) {
            $("#"+file.id).find(('td:eq(1)')).empty().append("上传出错!");
        });
    });
</script>